<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<style>
			.o1 {
				position: fixed;
				left: 0;
				top: 0;
				border-bottom: 2px solid #113f6c;
				z-index: 1;
			}
			
			#search {
				width: 300px;
				text-align: center;
				border: 1px solid red;
				/*position: absolute; */
			}
			
			#head {
				height: 100px;
			}
			
			body {
				height: 10000px;
				width: 4000px;
			}
		</style>
		<script>
			$(function() {
				var a1 = $("#search").offset().top;
				$(window).scroll(function() {
					var a2 = $(window).scrollTop();
					if(a2 >= a1) {
						$("#search").addClass("o1");
					} else {
						$("#search").removeClass("o1");
					}
				});
			});
		</script>

	</head>

	<body>
		<div id="head">
		</div>
		<div id="search">
			<form>
				<input type="text" />
				<input type="submit" value="search" />
			</form>
		</div>
	</body>

</html>